﻿@inject Microsoft.Extensions.Configuration.IConfiguration _config
@using Microsoft.Extensions.Configuration;
@section styles{ 
<style>
    .label-map {
        min-width:80px;
        display:inline-block;
        font-size:18px;
        padding:0 4px;
    }
</style>
}
<div class="content-wrapper">
    <section class="content-header">
        <h1>
            基础资料
            <small>区域站点分布</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="#">基础资料</a></li>
            <li class="active">区域站点分布</li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-md-8">
                <div class="box">
                    <div class="box-body">
                        <div id="echartMap" class="devicedata-map" style="width: 100%; border:1px solid #d5d5d5">
                        </div>
                    </div>
                </div>

            </div>
            <div class="col-md-4">
                <div class="box">
                    <div class="box-body">
                        <div class="input-group" style="display:none">
                            <span class="input-group-addon">日期范围</span>
                            <input type="text" v-model="datemin" ref="datemin" id="datemin" class="form-control" style="width:120px;">
                            <input type="text" v-model="datemax" ref="datemax" id="datemax" class="form-control" style="width:120px;margin-left:10px;">
                        </div>
                        <div id="toolbar" class="btn-group">
                            <button id="btn_search" v-on:click="searchL" type="button" class="btn btn-default">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询
                            </button>
                        </div>
                        <div class="devicedata-table" style="overflow: auto;">
                            <table id="bootstraptable" class="table table-bordered text-nowrap table-hover" style="font-size:10px"></table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@section scripts{
    <script type="text/javascript">

        var app = new Vue({
            el: '#app',
            data: {
                datemin: '',
                datemax: '',
                longtitude: 0,
                latitude: 0,
                oldMap: '',
                allNum:0
            },
            mounted: function () {
                var _self = this;
                _self.$refs.DeviceData.classList.add("active");
                _self.datemin = _self.getCurrentMonthFirst();
                _self.datemax = _self.getCurrentMonthLast();
                $('#datemin').datetimepicker({
                    format: 'yyyy-mm-dd',
                    minView: 2,
                    autoclose: true,
                    language: "zh-CN"
                });
                $('#datemax').datetimepicker({
                    format: 'yyyy-mm-dd',
                    minView: 2,
                    autoclose: true,
                    language: "zh-CN"
                });

                _self.$nextTick(function () {

                    _self.loadL();
                    //判断表格数据是否加载完成
                    $("#bootstraptable").on('load-success.bs.table', function (data) {
                        var res = $('#bootstraptable').bootstrapTable('getData');//获取所有数据
                        //console.log(res)
                        for (var i = 0; i < res.length; i++) {
                            _self.longtitude += res[i].Longtitude;
                            _self.latitude += res[i].Latitude;
                            _self.allNum += 1;
                        }
                        if (_self.allNum == 0) {
                            _self.longtitude = 120.58333;
                            _self.latitude = 31.3163;
                            _self.allNum = 1;
                        }
                        _self.mapL(_self.longtitude / _self.allNum, _self.latitude / _self.allNum);
                    });
                    //优先加载，设置加载顺序，不然getData为空
                    //setTimeout(function () {
                    //setDataCardView("#bootstraptable");

                    //}, 500);
                    //$("div[class='pull-right search']")[0].children[0].setAttribute("placeholder", "站点名称");
                });
            },
            methods: {
                loadL: function () {
                    _self = this;
                    var obj = [{
                        field: 'ClientId',
                        title: 'ClientId',
                        visible: false
                    }, {
                        field: 'ClientArea',
                        title: '站点名称',
                        align: 'center',
                        sortable: true,
                        formatter: function (value, row, index) {
                            var res = "";
                            res = "<a href='/DeviceData/MachineDetails?ClientId=" + row.ClientId + "'>" + row.ClientName + "</a>"
                            return res;
                        }
                    }, {
                        field: 'Normal',
                        title: '正常',
                        align: 'center',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return "<span class='label label-success'>" + row.Normal + "</span>"
                        }

                    }, {
                        field: 'Warning',
                        title: '报警',
                        align: 'center',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return "<span class='label label-warning'>" + row.Warning + "</span>"
                        }
                    }, {
                        field: 'Error',
                        align: 'center',
                        title: '故障',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return "<span class='label label-danger'>" + row.Error + "</span>"
                        }
                    }, {
                        field: 'Location',
                        align: 'center',
                        title: '定位',
                        formatter: function (value, row, index) {
                            return "<a href='javascript:void(0);' onclick='LocationCenter(" + row.Longtitude + "," + row.Latitude + ")'><i class='fa fa-map-marker'></i></a>"
                        }
                    }];
                    yui.tableSearch("bootstraptable", "/DeviceData/List", obj, "POST", "ClientId");
                },
                mapL(longtitude, latitude) {
                    _self = this;
                    var map = new BMap.Map("echartMap");//创建一个地图
                    //该Point是按纬经度来，而不是经纬度
                    var centerPoint = new BMap.Point(longtitude, latitude);//创建一个地理点坐标

                    map.centerAndZoom(centerPoint, 12);
                    //添加鼠标滚动缩放
                    map.enableScrollWheelZoom();
                    yui.$axiospostform('/DeviceData/MapList')
                        .then(function (response) {
                            var result = response.data;
                            result.forEach((e, i) => {
                                //标注的位置
                                var tagPoint = new BMap.Point(e.Longtitude, e.Latitude);

                                //var mk = new BMap.Marker(tagPoint, { icon: icon });//创建标注
                                var mk = new BMap.Marker(tagPoint);
                                map.addOverlay(mk);//将标注添加到地图中
                                //mk.setAnimation(BMAP_ANIMATION_BOUNCE);
                                var opts = { width: 380, height: 210 };
                                var content = "<p style='font-size:16px;font-weight:bold;color: #007c80;'>" + e.ClientName + "</p>" +
                                    "<hr/>" +
                                    "<label class='label-map label-success' style='font-size:13px'>泵1运行: " + e.Pump1Run + " </label> <span style='padding:5px'></span>" +
                                    "<label class='label-map label-success' style='font-size:13px'>泵1故障: " + e.Pump1Alarm + " </label> <span style='padding:5px'></span>" +
                                    "<label class='label-map label-success' style='font-size:13px'>泵2运行: " + e.Pump2Run + " </label> <span style='padding:5px'></span>" +
                                    "<label class='label-map label-success' style='font-size:13px'>泵2故障: " + e.Pump2Alarm + " </label> <span style='padding:5px'></span>" +
                                    "<hr/>" +
                                    "<label class='label-map label-success' style='font-size:13px'>液位: " + e.WaterLevel + " m</label><span style='padding:5px'></span>" +
                                    "<label class='label-map label-success' style='font-size:13px'>甲烷: " + e.CH4 + " </label><span style='padding:5px'></span>" +
                                    "<label class='label-map label-success' style='font-size:13px'>温度: " + e.Temperature + " ℃</label><span style='padding:5px'></span>" +
                                    "<label class='label-map label-success' style='font-size:13px'>湿度: " + e.Humidity + " %RH</label><span style='padding:5px'></span>" +
                                    "<hr/>" +
                                    "<label class='label-map label-success' style='font-size:13px'>风机日发电量: " + e.WindDailyPower + " KWH</label><span style='padding:5px'></span>" +
                                    "<label class='label-map label-success' style='font-size:13px'>光伏日发电量: " + e.PVDailyPower + " KWH</label><span style='padding:5px'></span>" +
                                    "<hr/>";

                                var infoWindow = new BMap.InfoWindow(content, opts);
                                mk.addEventListener("click", function (event) {
                                    map.openInfoWindow(infoWindow, tagPoint);
                                });
                            })

                        })
                        .catch(function (error) {
                            console.log(error)
                        });
                    this.oldMap = map;
                },
                LocationCenter(longtitude, latitude) {
                    this.longtitude = longtitude;
                    this.latitude = latitude;
                    //修改地图中心店
                    var newPoint = new BMap.Point(this.longtitude, this.latitude);//创建一个地理点坐标
                    this.oldMap.panTo(newPoint);
                    var allOverlay = this.oldMap.getOverlays();
                    allOverlay.forEach((e, i) => {
                        if (e.getPosition() != null) {
                            if (e.getPosition().lng == longtitude && e.getPosition().lat == latitude) {
                                e.setAnimation(BMAP_ANIMATION_BOUNCE)
                                setTimeout(function () {
                                    e.setAnimation(null);
                                }, 1000);
                            }
                        }
                    });
                },
                searchL: function () {
                    $("#bootstraptable").bootstrapTable('refresh');
                }
            }
        });
        function LocationCenter(longtitude, latitude) {
            app.LocationCenter(longtitude, latitude)
        }
    </script>
}